<template>
	<div class="kugou-register">
		<!-- 顶部导航 -->
		<header class="header">
			<div class="header-container">
				<div class="logo">
					<span class="logo-icon">KG</span>
					<span class="logo-text">酷狗音乐</span>
				</div>
				<nav class="nav">
					<a href="#" class="nav-item">首页</a>
					<a href="#" class="nav-item">登录</a>
					<a href="#" class="nav-item active">注册</a>
				</nav>
				<button class="menu-btn">
					<i class="icon-menu">☰</i>
				</button>
			</div>
		</header>

		<!-- 主内容区 -->
		<main class="main-content">
			<div class="register-card">


				<!-- 右侧注册表单 -->
				<div class="form-section">
					<div class="form-header">
						<h3 class="form-title">创建账号</h3>
						<p class="login-link">已有账号？<a><text @click="tiaologin">立即登录</text></a></p>
					</div>

					<form @submit.prevent="handleSubmit" class="register-form">
						<!-- 手机号输入 -->
						<div class="form-group">
							<label for="phone" class="form-label">手机号</label>
							<div class="input-wrapper phone-input">
								<span class="country-code">+86</span>
								<input type="" id="phone" v-model="form.phone" @blur="validatePhone"
									@input="clearError('phone')" class="form-input" placeholder="请输入手机号">
								<i v-if="form.phone && !errors.phone" class="icon-valid">✓</i>
							</div>
							<p v-if="errors.phone" class="error-message">{{ errors.phone }}</p>
						</div>

						<!-- 验证码输入 -->
						<div class="form-group">
							<label for="code" class="form-label">验证码</label>
							<div class="code-input-group">
								<input type="text" id="code" v-model="form.code" @blur="validateCode"
									@input="clearError('code')" class="form-input code-input" placeholder="请输入验证码">
								<button type="button" @click="sendCode" class="get-code-btn">
									{{ isCodeSending ? `${countdown}s后重发` : '获取验证码' }}
								</button>
							</div>
							<p v-if="errors.code" class="error-message">{{ errors.code }}</p>
						</div>

						<!-- 密码输入 -->
						<div class="form-group">
							<label for="password" class="form-label">设置密码</label>
							<div class="input-wrapper">
								<input :type="showPassword ? 'text' : 'password'" id="password" v-model="form.password"
									@blur="validatePassword" @input="clearError('password')" class="form-input"
									placeholder="请设置密码">
								<button type="button" @click="showPassword = !showPassword" class="toggle-password">
									{{ showPassword ? '隐藏' : '显示' }}
								</button>
							</div>
							<p v-if="errors.password" class="error-message">{{ errors.password }}</p>
							<p class="password-tip">密码长度为8-16位，需包含字母和数字</p>
						</div>

						<!-- 同意条款 -->
						<div class="agree-terms">
							<label class="terms-label">
								<checkbox-group name="" @change="clearErrors">
									<label>
										<checkbox value="1" class="terms-checkbox" :checked="form.agreeTerms" />
									</label>
								</checkbox-group>
								<span class="terms-text">&nbsp;我已阅读并同意<a href="#" class="link">《用户服务协议》</a>和<a href="#"
										class="link">《隐私政策》</a></span>
							</label>
							<p v-if="errors.agreeTerms" class="error-message">{{ errors.agreeTerms }}</p>
						</div>

						<!-- 注册按钮 -->
						<button class="register-btn" @click="zhuce" type="primary"
							:disabled="form.agreeTerms?false:true">立即注册</button>

						<!-- 其他注册方式 -->
						<div class="other-methods">
							<p class="other-methods-text">其他注册方式</p>
							<div class="social-icons">
								<button type="button" class="social-icon" title="微信登录">微</button>
								<button type="button" class="social-icon" title="QQ登录">Q</button>
								<button type="button" class="social-icon" title="微博登录">微</button>
								<button type="button" class="social-icon" title="Facebook登录">F</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</main>

		<!-- 页脚 -->
		<footer class="footer">
			<div class="footer-container">
				<p class="copyright">© 2023 酷狗音乐 版权所有</p>
				<div class="footer-links">
					<a href="#" class="footer-link">关于我们</a>
					<a href="#" class="footer-link">联系我们</a>
					<a href="#" class="footer-link">服务条款</a>
					<a href="#" class="footer-link">隐私政策</a>
					<a href="#" class="footer-link">帮助中心</a>
				</div>
			</div>
		</footer>

		<!-- 注册成功提示 -->
		<div v-if="showSuccessModal" class="modal-overlay">
			<div class="modal">
				<div class="modal-icon">✓</div>
				<h3 class="modal-title">注册成功！</h3>
				<p class="modal-message">您已成功注册酷狗账号，现在可以登录使用了</p>
				<button @click="showSuccessModal = false" class="modal-btn">去登录</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		registerAPI
	} from '../../axios/http';

	// 表单数据
	const form = reactive({
		phone: '',
		code: '',
		password: '',
		agreeTerms: false
	});

	// 错误信息
	const errors = reactive({
		phone: '',
		code: '',
		password: '',
		agreeTerms: ''
	});

	// 验证码相关状态
	const isCodeSending = ref(false);
	const countdown = ref(60);
	const showPassword = ref(false);
	const showSuccessModal = ref(false);
	let YZMflag = ref(false)

	// 验证手机号
	const validatePhone = () => {
		const phoneReg = /^1[3-9]\d{9}$/;
		if (!form.phone) {
			errors.phone = '请输入手机号';
			return false;
		} else if (!phoneReg.test(form.phone)) {
			errors.phone = '请输入正确的手机号';
			return false;
		}
		errors.phone = '';
		return true;
	};

	// 验证验证码
	const validateCode = () => {
		if (!form.code) {
			errors.code = '请输入验证码';
			return false;
		} else if (form.code.length !== 4) {
			errors.code = '验证码长度为4位';
			return false;
		}
		errors.code = '';
		return true;
	};

	// 验证密码
	const validatePassword = () => {
		const passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;
		if (!form.password) {
			errors.password = '请设置密码';
			return false;
		} else if (!passwordReg.test(form.password)) {
			errors.password = '密码长度为8-16位，需包含字母和数字';
			return false;
		}
		errors.password = '';
		return true;
	};

	// 验证同意条款
	const validateAgreeTerms = () => {
		if (!form.agreeTerms) {
			errors.agreeTerms = '请阅读并同意用户服务协议和隐私政策';
			return false;
		}
		errors.agreeTerms = '';
		return true;
	};

	// 清除错误信息
	const clearError = (field) => {
		errors[field] = '';
	};

	let code = ref('')

	// 发送验证码
	const sendCode = () => {
		if (YZMflag.value) return;
		if (!validatePhone()) return;

		isCodeSending.value = true;
		YZMflag.value = true
		// 模拟发送验证码请求
		console.log(`向手机号 ${form.phone} 发送验证码`);

		// 倒计时
		const timer = setInterval(() => {
			countdown.value--;
			if (countdown.value == 50) {
				code.value = ''
				for (var i = 0; i < 4; i++) {
					let codes = Math.floor(Math.random() * 9)
					code.value += codes
				}
				console.log('验证码为:' + code.value)
			}
			if (countdown.value <= 0) {
				clearInterval(timer);
				isCodeSending.value = false;
				countdown.value = 60;
				YZMflag.value = false
			}
		}, 1000);
	};

	// 提交表单
	const handleSubmit = () => {
		// 模拟注册请求
		console.log('提交注册信息:', form);
		// 全量验证
		const isPhoneValid = validatePhone();
		const isCodeValid = validateCode();
		const isPasswordValid = validatePassword();
		const isAgreeTermsValid = validateAgreeTerms();

		if (isPhoneValid && isCodeValid && isPasswordValid && isAgreeTermsValid) {
			// 模拟注册请求
			console.log('提交注册信息:', form);

			// 显示成功提示
			setTimeout(() => {
				showSuccessModal.value = true;
				// 重置表单
				form.phone = '';
				form.code = '';
				form.password = '';
				form.agreeTerms = false;
			}, 1000);
		}
	};

	let clearErrors = (e) => {
		console.log(e.detail.value);
		if (e.detail.value.length <= 0) {
			form.agreeTerms = false
		} else {
			form.agreeTerms = true
		}
	}
	
	let zhuce = async () => {
		let obj = {
			phone: form.phone,
			password: form.password
		}
		let res = await registerAPI(obj)
		if (res.data.code == 200 && form.code == code.value) {
			//在起始页面跳转到test.vue页面并传递参数
			uni.navigateTo({
				url: '/components/Login/Login?'
			});
			localStorage.setItem('token', res.data.token)
		} else {
			uni.showToast({
				title: '注册失败',
				duration: 2000,
				icon: 'error'
			});
		}
	}
	
	let tiaologin=()=>{
	uni.navigateTo({
		url: '/components/Login/Login?'
	});	
	}
</script>

<style scoped>
	/* 基础样式 */
	.kugou-register {
		font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
		color: #333;
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航 */
	.header {
		background-color: #fff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		padding: 16px 0;
	}

	.header-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo-icon {
		display: inline-block;
		width: 36px;
		height: 36px;
		background-color: #2183e4;
		color: white;
		border-radius: 50%;
		text-align: center;
		line-height: 36px;
		font-weight: bold;
		margin-right: 10px;
	}

	.logo-text {
		font-size: 20px;
		font-weight: bold;
		color: #333;
	}

	.nav {
		display: flex;
	}

	.nav-item {
		color: #666;
		text-decoration: none;
		margin-left: 30px;
		font-size: 14px;
		transition: color 0.3s;
	}

	.nav-item:hover {
		color: #2183e4;
	}

	.nav-item.active {
		color: #2183e4;
		font-weight: bold;
	}

	.menu-btn {
		display: none;
		background: none;
		border: none;
		font-size: 20px;
		cursor: pointer;
		color: #666;
	}

	/* 主内容区 */
	.main-content {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px 20px;
	}

	.register-card {
		width: 100%;
		max-width: 900px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
		display: flex;
		overflow: hidden;
	}

	/* 左侧品牌区 */
	.brand-section {
		width: 40%;
		background: linear-gradient(135deg, #2183e4 0%, #ff6b8b 100%);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-top: ;
	}

	.brand-title {
		font-size: 28px;
		margin-bottom: 15px;
		font-weight: bold;
	}

	.brand-desc {
		font-size: 16px;
		opacity: 0.9;
		margin-bottom: 40px;
	}

	.music-icon-container {
		position: relative;
		width: 160px;
		height: 160px;
	}

	.music-circle {
		position: absolute;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		animation: pulse 3s infinite ease-in-out;
	}

	.circle-outer {
		width: 160px;
		height: 160px;
	}

	.circle-middle {
		width: 120px;
		height: 120px;
		top: 20px;
		left: 20px;
		animation-delay: 0.5s;
	}

	.circle-inner {
		width: 80px;
		height: 80px;
		top: 40px;
		left: 40px;
		animation-delay: 1s;
	}

	.music-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 40px;
	}

	/* 右侧表单区 */
	.form-section {
		width: 60%;
		padding: 40px;
	}

	.form-header {
		margin-bottom: 30px;
	}

	.form-title {
		font-size: 24px;
		margin-bottom: 10px;
		color: #333;
	}

	.login-link {
		color: #666;
		font-size: 14px;
	}

	.login-link a {
		color: #2183e4;
		text-decoration: none;
	}

	.login-link a:hover {
		text-decoration: underline;
	}

	.register-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.form-label {
		font-size: 14px;
		color: #333;
		font-weight: 500;

	}

	.input-wrapper {
		position: relative;
	}

	.form-input {
		width: 100%;
		height: 35px;
		padding: 14px 16px;
		border: 1px solid #ddd;
		border-radius: 6px;
		font-size: 14px;
		transition: border-color 0.3s, box-shadow 0.3s;
		box-sizing: border-box;
	}

	.form-input:focus {
		outline: none;
		border-color: #2183e4;
		box-shadow: 0 0 0 2px rgba(229, 49, 111, 0.1);
	}

	.phone-input .form-input {
		padding-left: 60px;
	}

	.country-code {
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #666;
		font-size: 14px;
	}

	.icon-valid {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		color: #52c41a;
		font-size: 18px;
	}

	.code-input-group {
		display: flex;
		gap: 10px;
	}

	.code-input {
		flex: 1;
	}

	.get-code-btn {
		padding: 0 20px;
		background-color: #f5f5f5;
		color: #333;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.get-code-btn:hover:not(:disabled) {
		background-color: #e8e8e8;
	}

	.get-code-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.toggle-password {
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		background: none;
		border: none;
		color: #666;
		font-size: 14px;
		cursor: pointer;
		padding: 5px;
	}

	.password-tip {
		font-size: 12px;
		color: #999;
		margin-top: 2px;
	}

	.agree-terms {
		margin-top: 10px;
	}

	.terms-label {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
		cursor: pointer;
	}

	.terms-checkbox {
		margin-right: 8px;
		width: 16px;
		height: 16px;
		accent-color: #2183e4;
	}

	.link {
		color: #2183e4;
		text-decoration: none;
	}

	.link:hover {
		text-decoration: underline;
	}

	.register-btn {
		width: 100%;
		padding: 14px;
		background-color: #2183e4;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		transition: background-color 0.3s, transform 0.1s;
		margin-top: 10px;
	}

	.register-btn:hover {
		background-color: #d4205e;
	}

	.register-btn:active {
		transform: scale(0.99);
	}

	.other-methods {
		margin-top: 30px;
		text-align: center;
	}

	.other-methods-text {
		font-size: 14px;
		color: #999;
		margin-bottom: 15px;
		position: relative;
	}

	.other-methods-text::before,
	.other-methods-text::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 30%;
		height: 1px;
		background-color: #eee;
	}

	.other-methods-text::before {
		left: 0;
	}

	.other-methods-text::after {
		right: 0;
	}

	.social-icons {
		display: flex;
		justify-content: center;
		gap: 20px;
	}

	.social-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #f5f5f5;
		border: none;
		color: #666;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.social-icon:hover {
		background-color: #2183e4;
		color: white;
	}

	.error-message {
		color: #ff4d4f;
		font-size: 12px;
		margin-top: 2px;
		display: flex;
		align-items: center;
	}

	.error-message::before {
		content: "!";
		display: inline-block;
		width: 16px;
		height: 16px;
		background-color: #ff4d4f;
		color: white;
		border-radius: 50%;
		text-align: center;
		line-height: 16px;
		font-size: 12px;
		margin-right: 4px;
	}

	/* 页脚 */
	.footer {
		background-color: #fff;
		padding: 30px 0;
		border-top: 1px solid #eee;
	}

	.footer-container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 20px;
		text-align: center;
	}

	.copyright {
		color: #999;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.footer-links {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: 20px;
	}

	.footer-link {
		color: #666;
		font-size: 14px;
		text-decoration: none;
		transition: color 0.3s;
	}

	.footer-link:hover {
		color: #2183e4;
	}

	/* 模态框 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		padding: 20px;
	}

	.modal {
		background-color: white;
		border-radius: 12px;
		width: 100%;
		max-width: 400px;
		padding: 30px;
		text-align: center;
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
		animation: modalFadeIn 0.3s;
	}

	.modal-icon {
		width: 60px;
		height: 60px;
		background-color: #52c41a;
		color: white;
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 30px;
		margin-bottom: 20px;
	}

	.modal-title {
		font-size: 20px;
		color: #333;
		margin-bottom: 10px;
	}

	.modal-message {
		color: #666;
		margin-bottom: 25px;
		font-size: 14px;
	}

	.modal-btn {
		background-color: #2183e4;
		color: white;
		border: none;
		border-radius: 6px;
		padding: 10px 20px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.modal-btn:hover {
		background-color: #d4205e;
	}

	/* 动画 */
	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.1);
			opacity: 0.8;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes modalFadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.register-card {
			flex-direction: column;
		}

		.brand-section {
			width: 100%;
			/* padding: 30px 20px; */
			margin: 0 auto;
		}

		.form-section {
			width: 100%;
			padding: 30px 20px;
		}

		.brand-title {
			font-size: 24px;
		}

		.music-icon-container {
			width: 120px;
			height: 120px;
		}

		.circle-outer {
			width: 120px;
			height: 120px;
		}

		.circle-middle {
			width: 90px;
			height: 90px;
			top: 15px;
			left: 15px;
		}

		.circle-inner {
			width: 60px;
			height: 60px;
			top: 30px;
			left: 30px;
		}

		.nav {
			display: none;
		}

		.menu-btn {
			display: block;
		}

		.other-methods-text::before,
		.other-methods-text::after {
			width: 25%;
		}
	}



	body {
		font-family: "Microsoft Yahei", sans-serif;
		margin: 0;
		padding: 0;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
	}

	.container {
		width: 380px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo-icon {
		width: 32px;
		height: 32px;
		background-color: #2183e4;
		color: white;
		border-radius: 50%;
		text-align: center;
		line-height: 32px;
		font-weight: bold;
		margin-right: 10px;
		font-size: 16px;
	}

	.logo-text {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.menu-btn {
		margin-left: auto;
		background: none;
		border: none;
		font-size: 20px;
		cursor: pointer;
		color: #666;
	}

	.welcome-section {
		background: linear-gradient(135deg, #2183e4 0%, #ff6b8b 100%);
		color: white;
		padding: 30px 20px;
		text-align: center;
	}

	.welcome-title {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.welcome-desc {
		font-size: 14px;
		opacity: 0.9;
	}

	.music-icon-container {
		width: 120px;
		height: 120px;
		margin: 20px auto;
		position: relative;
	}

	.music-circle {
		position: absolute;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		animation: pulse 3s infinite ease-in-out;
	}

	.circle-outer {
		width: 120px;
		height: 120px;
	}

	.circle-middle {
		width: 90px;
		height: 90px;
		top: 15px;
		left: 15px;
		animation-delay: 0.5s;
	}

	.circle-inner {
		width: 60px;
		height: 60px;
		top: 30px;
		left: 30px;
		animation-delay: 1s;
	}

	.music-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 28px;
	}

	.form-section {
		width: 90%;
	}

	.form-header {
		margin-bottom: 20px;
	}

	.form-title {
		font-size: 20px;
		margin-bottom: 10px;
		color: #333;
	}

	.login-link {
		color: #666;
		font-size: 14px;
	}

	.login-link a {
		color: #2183e4;
		text-decoration: none;
	}

	.login-link a:hover {
		text-decoration: underline;
	}

	.form-group {
		margin-bottom: 15px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		color: #333;
		font-size: 14px;
	}

	.form-group input {
		width: 100%;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-sizing: border-box;
		font-size: 14px;
	}

	.form-group input:focus {
		outline: none;
		border-color: #2183e4;
		box-shadow: 0 0 0 2px rgba(229, 49, 111, 0.1);
	}

	.code-input-group {
		display: flex;
		gap: 10px;
	}

	.code-input {
		flex: 1;
	}

	.get-code-btn {
		padding: 0 15px;
		background-color: #f5f5f5;
		color: #333;
		border: none;
		border-radius: 4px;
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.get-code-btn:hover:not(:disabled) {
		background-color: #e8e8e8;
	}

	.get-code-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.password-tip {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.agree-terms {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 20px;
	}

	.agree-terms input {
		margin-right: 8px;
		width: 16px;
		height: 16px;
		accent-color: #2183e4;
	}

	.agree-terms a {
		color: #2183e4;
		text-decoration: none;
	}

	.agree-terms a:hover {
		text-decoration: underline;
	}

	.register-btn {
		width: 100%;
		padding: 10px;
		background-color: #2183e4;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.register-btn:hover {
		background-color: #d4205e;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.1);
			opacity: 0.8;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>